<template>
  <div class="bottom-bar">
    <div class="check-content">
      <check-button class="check-button" :is-checked="isSelectAll" @click.native="selectAll" v-model="checkedAll"></check-button>
      <span>全选</span>
    </div>
    <div class="price">
      价格：{{totalPrice}}
    </div>
    <div class="calculate" @click="calclick">
      <button @click="calclick">去结算({{cartListLength}})</button>
      </div>
  </div>
</template>

<script>
  import CheckButton from '../../../components/content/checkButton/CheckButton.vue'
  import {mapGetters} from 'vuex'
  import {mapMutations} from 'vuex'
  export default{
    components:{
      CheckButton
    },
    data:function(){
      return{
        checkedAll:false
      }
    },
    computed:{
      ...mapGetters(['cart','cartLength']),
      totalPrice(){
        return this.cart.filter(item =>{
          return item.checked
        }).reduce((preValue,item) =>{
          return preValue + item.price * item.count
        },0).toFixed(2)
      },
      isSelectAll(){
        if(this.cart.length === 0) return false
        return !this.cart.find(item=>!item.checked)
      },
      // 去结算后显示的数字，即选中的数目的长度
      cartListLength(){
        return this.cart.filter(item=>item.checked).length
      }
    },
    methods:{
      selectAll(){
        if(this.isSelectAll){
          this.cart.forEach(item => item.checked = false)
        }else{
          this.cart.forEach(item => item.checked = true)
        }
      },
      ...mapMutations(["clearCartList","setCartList"]),
      calclick(){
       if(this.cartListLength === 0){
        this.$toast({
          type:'fail',
          message:'您还没有选中商品哦！',
          forbidClick:true,
          duration: 1500
        })
       }else{
         this.$dialog.confirm({
           title:'温馨提示',
           message:'您确定要提交订单吗？'
         }).then(()=>{
           this.$toast({
             type:'success',
             message:`提交 ${this.cartListLength} 条数据成功`,
             forbidClick:true,
             duration:1500
           });
           setTimeout(()=>{
             this.clearCartList();
             this.checkedAll = false
           },1500);
         }).catch(err=>{})
       }
      }
    },
    created(){
      let list = JSON.parse(localStorage.getItem("cartList")) || []
      if(list){
        this.setCartList(list)
      }
    }
  }
</script>

<style scoped="scoped">
  .bottom-bar{
    height: 40px;
    background-color: #eee;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 49px;
  }
  .check-content{
    line-height: 40px;
    display: flex;
    align-items: center;
    margin-left: 10px;
  }
  .check-button{
    line-height: 20px;
    height: 20px;
    width: 20px;
    margin-right: 5px;
  }
  .price{
    margin: 11px 20px;
  }
  .calculate{
    background-color: pink;
    font-weight: 600;
    color: white;
    width: 80px;
    height: 40px;
    margin-left: auto;
  }
  .calculate button{
    line-height: 40px;
    width: 80px;
    position: absolute;
    left: auto;
    right: 0;
    bottom: 0;
    outline: none;
    background-color: hotpink;
    border: 0;
  }
</style>
